<template>
	<!-- 我的关注 -->
	<view class="focus">
		<!-- #ifdef APP-PLUS -->
		<top-set></top-set>
		<tab-top fixed="true" title="我的关注"></tab-top>
		<!-- #endif -->
		<view class="show" v-if="show">
			<image src="/static/bg/noEvaluation.png"></image>
			<view class="show_text">您还没有关注哦</view>
		</view>
		<view class="main" v-if="!show">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="box" @tap="nav(item)">
					<view class="img"><image :src="item.info.account_info.head_images||'/static/bg/img.png'"></image></view>
					<view class="content">
						<view class="name">{{ item.info.name }}</view>
						<view class="signature">{{ item.info.account_info.say || '暂无签名' }}</view>
						<view class="text">完成 {{ item.info.order_count }}单 粉丝 {{ item.info.fans }}</view>
					</view>
				</view>
				<view class="btn1" v-if="item.mutual_concern == 0" @tap="focus(item)">已关注</view>
				<view class="btn2" v-if="item.mutual_concern == 1" @tap="focus(item)">
					<image src="/static/icon/lr.png" mode=""></image>
					相互关注
				</view>
			</view>
		</view>
		<jc-popUp position="bottom" ref="pop1" markTapHide="true">
			<view class="footer">
				<view class="item">确定取消关注此人?</view>
				<view class="item" @tap="total(1)">确定</view>
				<view class="item" @tap="total(0)">取消</view>
			</view>
		</jc-popUp>
	</view>
</template>

<script>
import jcPopUp from '@/components/jc-popUp/jc-popUp.vue';
export default {
	data() {
		return {
			show: true,
			list: [],
			avatar: '',
			item:''
		};
	},
	onLoad() {
		this.req(
			{
				url: 'both/listSetup',
				method: 'GET',
				data: {
					host_id: this.isLogin().hotel_id,
					setup_type: 1,
					app_type: 2,
					page: 1,
					limit: 9999
				}
			},
			res => {
				if (res.data.status == 0){ //暂无数据
					return;
				}
				this.list = res.data.data.list.list;
				this.show = false;
			}
		);
	},
	methods: {
		focus(item){
			/**
			 * 弹出层
			 */
			this.$refs.pop1.show();
			this.item = item
		},
		async total(e) {
			/**
			 * 取消关注
			 */
			if (!e) { //取消取消关注
				this.$refs.pop1.hide();
				return;
			}
			let [_deleteFocus,deleteFocus] = await this.deleteFocus()
			if(_deleteFocus || deleteFocus.data.status == 0){
				return;
			}
			//删除对应保洁
			for (let i = 0;i < this.list.length; i++) {
				if(this.list[i].id == this.item.id){
					this.list.splice(i,1)
				}
			}
			//传递关注数量
			uni.$emit('focus',this.list.length)
			//关闭弹层
			this.$refs.pop1.hide();
			this.showToast('已取消关注');
		},
		deleteFocus(){
			/**
			 * 取消关注接口
			 */
			return this.getReq({
				url: 'both/listSetup/' + this.item.host_id,
				method:'DELETE',
				data: {
					guest_id: this.item.guest_id,
					setup_type: 1,
					app_type: 2
				}
			})
		},
		nav(e) {
			/**
			 * 跳转保洁详情
			 */
			console.log(e);
			uni.navigateTo({
				url: '/pages/hotel/cleaner/cleaner?id=' + e.guest_id
			});
		}
	},
	components: { jcPopUp }
};
</script>

<style scoped lang="scss">
.focus {
	.show {
		width: 100%;
		padding: 100upx 116upx;
		box-sizing: border-box;
		position: relative;
		.show_text {
			position: absolute;
			top: 400upx;
			left: 290upx;
			font-size: 24upx;
			color: #999;
		}
		image {
			width: 518upx;
			height: 444upx;
		}
	}
	.main {
		margin-top: 10upx;
		width: 100%;
		padding: 0 24upx;
		box-sizing: border-box;
		.item:nth-last-child(1) {
			border-bottom: 0;
		}
		.item {
			width: 100%;
			height: 180upx;
			border-bottom: 1upx solid #e5e5e5;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.box {
				display: flex;
				.img {
					width: 120upx;
					height: 120upx;
					margin-right: 34upx;
					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.content {
					line-height: 1;
					.name {
						font-size: 32upx;
					}
					.signature {
						font-size: 24upx;
						line-height: 60upx;
						color: #999999;
					}
					.text {
						font-size: 24upx;
					}
				}
			}
			.btn1 {
				width: 120upx;
				height: 50upx;
				border-radius: 8upx;
				border: solid 2upx #e5e5e5;
				font-size: 28upx;
				line-height: 50upx;
				text-align: center;
				color: #999;
			}
			.btn2 {
				width: 174upx;
				height: 50upx;
				border-radius: 8upx;
				border: solid 2upx #e5e5e5;
				font-size: 28upx;
				color: #999999;
				line-height: 50upx;
				text-align: center;
				image{
					width: 30upx;
					height: 30upx;
				}
			}
		}
	}
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750upx;
		height: 320upx;
		background-color: #ffffff;
		.item:nth-child(1) {
			font-size: 24upx;
			color: #999999;
			border-bottom: 1upx solid #e5e5e5;
		}
		.item:nth-child(2) {
			border-bottom: 19upx solid #e5e5e5;
		}
		.item {
			height: 100upx;
			line-height: 100upx;
			font-size: 28upx;
			text-align: center;
		}
	}
}
</style>
